<template>
  <div class="add-workshop">
    <div>
      <label>{{$t('route.base')}}</label>
      <div></div>
      <button>
        <img /><label>{{ form.id == null ? $t('route.Add') : $t('route.modify')  }}{{$t('route.gateway')}}</label>
      </button>
    </div>
    <div>
      <el-form label-width="100px">
        <el-form-item :label="$t('route.IP_address')">
          <el-input :disabled="form.id != null" v-model="form.ip" />
        </el-form-item>
        <el-form-item :label="$t('route.NetWork_ID')">
          <el-input :disabled="form.id != null" v-model="form.panid" />
        </el-form-item>
        <el-form-item :label="$t('route.Workshop')">
          <el-select
            class="content"
            v-model="form.workshop"
            :placeholder="$t('route.Please_Select')"
          >
            <el-option
              v-for="item in workshopList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('route.Remarks')">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item>
          <el-button @click="addClick" type="primary">{{
            form.id == null ? $t('route.Add') : $t('route.modify')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import i18n from '../../i18n/index';
import Constant from "../../js/common/constant.js";
export default {
  data() {
    return {
      form: {
        ip: null,
        panid: null,
        workshop: null,
        remark: null,
      },
      workshopList: [],
    };
  },
  methods: {
    getAllWorkshop() {
      http.post(
        api.GET_ALL_WORKSHOP_NAME,
        {
          adminId: this.$store.state.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
        },
        (data) => {
          this.workshopList = data.data;
        }
      );
    },
    addClick() {
      if (CommonUtils.isEmpty(this.form.ip)) {
        this.$message.error(i18n.global.t('route.IP_address_cannot_be_empty'));
        return;
      }
      if (CommonUtils.isEmpty(this.form.panid)) {
        this.$message.error(i18n.global.t('route.Network_ID_cannot_be_empty'));
        return;
      }
      if (CommonUtils.isEmpty(this.form.workshop)) {
        this.$message.error(i18n.global.t('route.Workshop_cannot_be_empty'));
        return;
      }
      if (this.form.id == null) {
        http.post(
          api.ADD_GATEWAY,
          {
            adminId: this.$store.state.user.id,
            ip: this.form.ip,
            workshop: this.form.workshop,
            panid: this.form.panid,
            remark: this.form.remark,
          },
          (data) => {
            this.$message.success(i18n.global.t('route.Successfully_added'));
            this.$router.go(-1);
          }
        );
      } else {
        http.post(
          api.UPDATE_GATEWAY,
          {
            gatewayId: this.form.id,
            workshop: this.form.workshop,
            remark: this.form.remark,
          },
          (data) => {
            this.$message.success(i18n.global.t('route.Modified_successfully'));
            this.$router.go(-1);
          }
        );
      }
    },
  },
  created() {
    if (this.$route.params.gateway) {
      this.form = JSON.parse(this.$route.params.gateway);
    }
    this.getAllWorkshop();
  },
};
</script>
<style lang="scss" scoped>
.add-workshop {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div:nth-of-type(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }

  > div:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    .input {
    }

    .div-1 {
      display: flex;
      flex-direction: row;

      > label {
        margin-left: 10px;
        width: 200px;
      }
    }
  }
}
</style>
